import React from 'react'
import './orderItem.css'

class OrderItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editing: false,
            stars: props.stars || 0,
            comment: props.comment || ''
        }
    }

    render() {
        const orderItem = this.props.orderItem;
        return (
            <div>
                <div className='orderItem'>
                    <div className='orderItem_left'>
                        <div className='orderItem__picContainer'>
                            <img className='orderItem__pic' src={orderItem.img} alt="" />
                        </div>
                        <div className='orderItem__content'>
                            <div className='orderItem__product'>{orderItem.product}</div>
                            <div className='orderItem__shop'>{orderItem.shop}</div>
                            <div className='orderItem__detail'>
                                <div className='orderItem__price'>{orderItem.price}</div>
                            </div>
                        </div>
                    </div>
                    <div className='orderItem_right'>
                        {
                            orderItem.ifCommented ? (
                                <button className="orderItem__btn orderItem__btn--grey">
                                    查看评价
                                </button>
                            ) : (
                                <button className="orderItem__btn orderItem__btn--yellow"
                                    onClick={this.handleOpenEditArea.bind(this)}>
                                    评价
                                </button>
                            )
                        }
                    </div>
                </div>
                <div>
                    {this.state.editing ? this.renderEditArea() : ''}
                </div>
            </div>
        )
    }

    renderEditArea() {
        return (
            <div className='orderItem__commentContainer'>
                <textarea cols="60" rows="5" placeholder='添加评论' className='orderItem__comment' value={this.state.comment}
                    onChange={this.handleCommentChange.bind(this)}>
                </textarea>
                {this.renderStars()}
                <div>
                    <button className="orderItem__btn orderItem__btn--yellow orderItem__btn--left"
                        onClick={this.handleSubmitComment.bind(this)}
                    >提交</button>
                    <button className="orderItem__btn orderItem__btn--grey"
                        onClick={this.handleCloseEditArea.bind(this)}
                    >取消</button>
                </div>
            </div>
        )
    }

    renderStars() {
        const { stars } = this.state;
        return (
            <div className='orderItem__stars'>
                {
                    [1, 2, 3, 4, 5].map((item, index) => {
                        const light = stars >= item ?
                            "orderItem__star--light" : "orderItem__star--dark";
                        return (
                            <span className={light} key={index} onClick={this.handleClickStars.bind(this, item)}>★</span>
                        )
                    })
                }
            </div>
        )
    }

    handleOpenEditArea() {
        this.setState({
            editing: true
        })
    }

    handleCloseEditArea() {
        this.setState({
            editing: false,
            comment: this.props.comment || '',
            stars: this.props.stars || 0
        })
    }

    handleCommentChange(e) {
        this.setState({
            comment: e.target.value
        })
    }

    handleClickStars(stars) {
        this.setState({
            stars: stars
        })
    }

    handleSubmitComment() {
        const { id } = this.props.orderItem;
        const { comment , stars } = this.state;
        this.setState({
            editing: false
        })
        this.props.onSubmit(id, comment, stars);
    }
}

export default OrderItem